<template>
    <div class="watch-person">
    <h1>Interface 演示</h1>
    <h2>{{ person }}</h2>
        <h3>{{ personList }}</h3>
    <button @click="person.age++">年龄加一</button>
    <button @click="personList.push({name:'赵六',age:20,address:'男'})">添加</button>
    </div>
</template>

<script setup lang="ts" name="PersonRef">
    //  从 ts 中引入 类型，最新标准类型必须添加上 type
    import { reactive } from 'vue';
    import { type  Person, type Persons } from "@/types/types";

    //  定义一个该类型的数据
    let person = reactive<Person>({
        name: '张三',
        age: 18,
        address: '男'
    })  

    let personList:Persons = reactive([
        {
            name: '张三',
            age: 18,
            address: '男'
        }
    ])


</script>

<style scoped>
h1 {
    color: #42b983;
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
}
button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
button:hover {
    background-color: #369870;
}
</style>